<template>
	<view class="content">
		<!-- 订单详情 -->
		<view class="order-info">
			<view class="order-info-title">订单详情</view>
			<block v-for="(item,index) in orderDetail.goods" :key="index">
				<view class="cart-list-box">
					<view class="list-info">
						<view style="margin-bottom: 10px;">{{item.goodsName}}</view>
						<block v-for="(i,index2) in item.ingredientList" :key="index2">
							<span style="margin-right: 5px;font-size: 12px;color: #A3A3A3;">{{i}}</span>
						</block>
					</view>
					<view style="width:50%;padding:10px;">
						<view style="float:right">
							<view style="color:#A3A3A3">x {{item.count}}</view>
							<view>¥ {{item.price * item.count}}</view>
						</view>
					</view>
				</view>
			</block>
			<view class="cart-list-box order-sum" style="padding-bottom: 8px;">
				<label>总计 </label>
				<view style="display: flex;flex-direction: column;padding-right: 10px;">
					<label class="order-sum-number activity-color" style="text-align: right;">¥
						{{orderDetail.totalPrice}}</label>
					<view style="margin-top: 5px;font-size: 14px;text-align: right;">折扣：<span
							style="">{{orderDetail.discount}}</span>
					</view>
					<view style="text-align: right;font-size: 14px;">优惠：<span
							style="font-size: 14px;">￥{{orderDetail.saveMoney}}</span>
					</view>
					<view style="margin-top: 5px;">实付：<span
							style="color:#ffa13f;font-size: 18px;">￥{{orderDetail.payMoney}}</span></view>
				</view>
			</view>
		</view>
		<view class="order-info" style="margin-top: 10px;">
			<view class="order-info-title flex-display">
				<span>订单号码</span>
				<view class="order-info-li">{{orderDetail.orderId}}</view>
			</view>
			<view class="order-info-title flex-display">
				<span>订单时间</span>
				<view class="order-info-li">{{orderDetail.createTime}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: [],

			};
		},
		onLoad(options) {
			console.log(JSON.parse(options.data), "options*************");
			this.orderDetail = JSON.parse(options.data);

			this.orderDetail.goods = this.countEqualPairs(this.orderDetail.goods)

		},

		methods: {

			//计算相同商品
			countEqualPairs(arr) {
				// 创建一个新的数组，用来存储不重复的商品信息
				const goodsArr = [];
				// 创建一个空对象，用来记录新数组中相同对象的个数
				const goodsObj = {};
				arr.forEach(good => {
					// 将 good 中的 goodNum 和 status 属性删除
					const {
						goodNum,
						status,
						...newGood
					} = good;
					// 将剩下的属性组成一个新的 JSON 对象
					const newGoodStr = JSON.stringify(newGood);
					// 如果新数组中没有该对象，则将其添加到新数组中，并将个数设为 1
					if (!goodsObj[newGoodStr]) {
						goodsObj[newGoodStr] = 1;
						goodsArr.push({
							...newGood
						});
					} else {
						// 否则将相同对象的个数加 1
						goodsObj[newGoodStr]++;
					}
				});
				// 将新数组中相同对象的个数保存到 count 属性中
				goodsArr.forEach(good => {
					const goodStr = JSON.stringify(good);
					good.count = goodsObj[goodStr];
				});
				return goodsArr
			},
			//计算价格


		}

	}
</script>

<style lang="scss">
	.content {
		// width: 100wh;
		height: 100%;
		background-color: #f2f2f2;
	}

	.order-info {
		background-color: #fff;
	}

	.order-info-title {
		padding: 10px 0;
		padding-left: 10px;
		font-size: 12px;
		color: #a3a3a3;
	}

	.cart-list-box {
		border-top: 1px solid #ececec;
		padding-top: 5px;
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
	}

	.flex-display {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f2f2f2;
	}

	.order-info-li {
		padding-right: 10px;
	}
</style>
